<script lang="ts" setup>
// 从Vue中导入onMounted和ref函数
import { onMounted, ref } from 'vue';
// 从Element Plus中导入ElMessage和ComponentSize类型
import { type ComponentSize } from 'element-plus'
// 导入用户信息存储模块
import { userInfoStore } from '../assets/userStore/userStore';
// 从Element Plus图标库中导入SoldOut和Delete图标
import { SoldOut, Delete } from '@element-plus/icons-vue'
// 导入外卖模型
import { TakeoutModel } from '../assets/models/Takeout';
// 导入商店API模块
import { storeApis } from '../assets/apis/StoreApis';
// 导入商店模型
import { StoreModel } from '../assets/models/Store';
// 导入外卖API模块
import { takeoutApis } from '../assets/apis/TakeoutApis';

// 定义一个响应式变量size，初始值为'default'
const size = ref<ComponentSize>('default')
// 创建用户信息存储实例
const userStore = userInfoStore()
// 定义一个响应式变量takeouts，用于存储外卖信息数组
let takeouts = ref<Array<TakeoutModel>>([]);
// 定义一个响应式变量isEmpty，初始值为true，表示是否为空
let isEmpty = ref(true);

onMounted(() => {
    // 调用storeApis.queryStore方法查询商店信息，并且传入用户ID
    storeApis.queryStore(userStore.id)
        .then((value: StoreModel) => {
            // 如果查询到商店信息
            if (value) {
                // 设置isEmpty为false，表示不为空
                isEmpty.value = false;
                // 调用takeoutApis.queryTakeouts方法查询该商店的外卖信息，并且将商店ID传入
                takeoutApis.queryTakeouts(value.id!)
                    .then((value: Array<TakeoutModel>) => {
                        // 如果查询到外卖信息
                        if (value) {
                            // 将外卖信息赋值给takeouts变量
                            takeouts.value = value;
                        }
                    })
                // 如果未查询到商店信息
            } else {
                // 设置isEmpty为true，表示为空
                isEmpty.value = true;
            }
        })
})
</script>

<template>
    <!-- 使用el-scrollbar组件创建一个滚动区域，高度为100%，隐藏垂直滚动条 -->
    <el-scrollbar height="100%" style="overflow-y: hidden;">
        <!-- 如果isEmpty为true，显示“你还没有店铺哦～” -->
        <el-empty v-show="isEmpty" style="width: 100%;height: 100%;" description="你还没有店铺哦～" />
        <!-- 如果isEmpty为false，则显示店铺列表 -->
        <el-space wrap :size="size" v-show="!isEmpty">
            <!-- 遍历takeouts数组，为每个外卖信息生成一个el-card -->
            <div v-for="item in takeouts" :key="item.id">
                <!-- 使用el-card组件创建卡片，设置阴影效果和样式 -->
                <el-card shadow="hover" style="width: 250px;height: auto;border-radius: 15px;">
                    <!-- 使用el-row和el-col布局卡片内容 -->
                    <el-row align="middle" justify="center">
                        <el-col :span="24">
                            <!-- 通过el-image实现对外卖商品图片的展示，设置宽度和高度，fit属性控制图片填充方式 -->
                            <el-image :src="`/api/${item.takeout_portrait}`" style="width: 100%;height: 200px;"
                                fit="contain" />
                        </el-col>
                        <el-col :span="24" align="start">
                            <!-- 显示外卖名称， 对字体大小和展示行数进行限制 -->
                            <el-text style="font-size: larger;" line-clamp="1">{{ item.takeout_name }}</el-text>
                        </el-col>
                        <el-col :span="24" align="start">
                            <!-- 显示外卖介绍，对展示信息的颜色、字体大小和行数进行限制 -->
                            <el-text style="color: gray;height: 60px;" line-clamp="3">{{ item?.introduce }}</el-text>
                        </el-col>
                        <el-col :span="24" align="end">
                            <!-- 显示外卖价格，对外卖信息的颜色和字体大小进行限制 -->
                            <el-text style="color: red;font-size: larger;">¥ {{ item.price }}</el-text>
                        </el-col>
                        <!-- 显示浏览量和评分 -->
                        <el-col :span="24" style="margin-top: 5%;">
                            <el-row style="width: 100%;">
                                <el-col :span="24" align="start">
                                    <!-- 显示浏览量 -->
                                    <el-text>浏览量：{{ item?.flow }}</el-text>
                                    <!-- 显示评分 -->
                                    <el-text style="margin-left: 10%;">评分：{{ item.mark }}</el-text>
                                </el-col>
                            </el-row>
                        </el-col>
                        <!-- 操作按钮区域 -->
                        <el-col :span="24" style="margin-top: 10%;">
                            <el-row style="width: 100%;">
                                <el-col :span="24" align="end">
                                    <!-- 暂停外卖按钮，点击后调用pauseTakeout方法 -->
                                    <el-button plain>
                                        <el-icon color="grey">
                                            <SoldOut />
                                        </el-icon>
                                    </el-button>
                                    <!-- 删除外卖按钮，点击后调用deleteTakeout方法 -->
                                    <el-button type="danger" plain>
                                        <el-icon color="red">
                                            <Delete />
                                        </el-icon>
                                    </el-button>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </el-space>
    </el-scrollbar>
</template>